<template>
  <header class="app-header">
    <div class="container">
      <div class="header-content">
        <!-- Logo -->
        <div class="logo">
          <router-link to="/" class="logo-link">
            <h1 class="logo-text">橘子小说</h1>
          </router-link>
        </div>
        
        <!-- 导航菜单 -->
        <nav class="nav-menu">
          <router-link to="/" class="nav-item">
            {{ $t('nav.home') }}
          </router-link>
          <router-link to="/library" class="nav-item">
            {{ $t('nav.library') }}
          </router-link>
          <router-link to="/vip" class="nav-item vip-link">
            <el-icon><StarFilled /></el-icon>
            VIP
          </router-link>
          <router-link v-if="userStore.isLoggedIn" to="/bookshelf" class="nav-item">
            {{ $t('nav.bookshelf') }}
          </router-link>
        </nav>
        
        <!-- 搜索框 -->
        <div class="search-box">
          <el-input
            v-model="searchKeyword"
            :placeholder="$t('common.search')"
            class="search-input"
            @keyup.enter="handleSearch"
          >
            <template #suffix>
              <el-icon class="search-icon" @click="handleSearch">
                <Search />
              </el-icon>
            </template>
          </el-input>
        </div>
        
        <!-- 右侧工具栏 -->
        <div class="toolbar">
          <!-- 语言切换 -->
          <el-tooltip :content="$t('nav.language')" placement="bottom">
            <el-button
              type="text"
              class="toolbar-btn"
              @click="appStore.toggleLocale"
            >
              <el-icon><Setting /></el-icon>
              {{ appStore.isZhCN ? 'EN' : '中' }}
            </el-button>
          </el-tooltip>
          
          <!-- 主题切换 -->
          <el-tooltip :content="$t('nav.theme')" placement="bottom">
            <el-button
              type="text"
              class="toolbar-btn"
              @click="appStore.toggleTheme"
            >
              <el-icon>
                <Sunny v-if="!appStore.isDark" />
                <Moon v-else />
              </el-icon>
            </el-button>
          </el-tooltip>
          
          <!-- 用户菜单 -->
          <div v-if="userStore.isLoggedIn && userStore.user" class="user-menu">
            <el-dropdown @command="handleUserCommand">
              <div class="user-info">
                <el-avatar
                  :size="32"
                  :src="userStore.user?.avatar_url || userStore.user?.avatar"
                  class="user-avatar"
                >
                  {{ (userStore.user?.nickname || userStore.user?.username || userStore.user?.email || '?').charAt(0).toUpperCase() }}
                </el-avatar>
                <span class="user-name">{{ userStore.user?.nickname || userStore.user?.username || '用户' }}</span>
                <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">
                    <el-icon><User /></el-icon>
                    个人中心
                  </el-dropdown-item>
                  <el-dropdown-item command="wallet">
                    <el-icon><Wallet /></el-icon>
                    我的钱包
                  </el-dropdown-item>
                  <el-dropdown-item command="admin" v-if="userStore.isAdmin">
                    <el-icon><Setting /></el-icon>
                    用户管理
                  </el-dropdown-item>
                  <el-dropdown-item divided command="logout">
                    <el-icon><SwitchButton /></el-icon>
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          
          <!-- 登录/注册按钮 -->
          <div v-else class="auth-buttons">
            <router-link to="/auth/login">
              <el-button type="primary" size="small">
                {{ $t('common.login') }}
              </el-button>
            </router-link>
            <router-link to="/auth/register">
              <el-button type="default" size="small">
                {{ $t('common.register') }}
              </el-button>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  Search, 
  Setting, 
  Sunny, 
  Moon, 
  User, 
  Wallet, 
  SwitchButton, 
  ArrowDown,
  StarFilled
} from '@element-plus/icons-vue'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'

// 组件状态
const searchKeyword = ref('')

// 使用stores和router
const appStore = useAppStore()
const userStore = useUserStore()
const router = useRouter()

/**
 * 处理搜索
 */
const handleSearch = () => {
  if (!searchKeyword.value.trim()) return
  
  router.push({
    name: 'Search',
    query: { q: searchKeyword.value.trim() }
  })
}

/**
 * 处理用户菜单命令
 */
const handleUserCommand = async (command: string) => {
  try {
    switch (command) {
      case 'profile':
        await router.push('/profile')
        break
      case 'wallet':
        await router.push('/wallet')
        break
      case 'admin':
        await router.push('/admin/users')
        break
      case 'logout':
        await userStore.logout()
        ElMessage({
          message: '已退出登录',
          type: 'success',
          duration: 2000,
          showClose: true
        })
        await router.push('/')
        break
    }
  } catch (error) {
    console.error('导航失败:', error)
    ElMessage.error('页面跳转失败，请重试')
  }
}
</script>

<style lang="scss" scoped>
.app-header {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-content {
  display: flex;
  align-items: center;
  height: 64px;
  gap: var(--spacing-lg);
}

.logo {
  .logo-link {
    text-decoration: none;
    color: white;
    
    .logo-text {
      font-size: 24px;
      font-weight: bold;
      margin: 0;
      background: linear-gradient(45deg, #fff, var(--secondary-light), var(--primary-light));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }
}

.nav-menu {
  display: flex;
  gap: var(--spacing-lg);
  
  .nav-item {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 500;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    
    &:hover,
    &.router-link-active {
      background: rgba(255, 255, 255, 0.2);
      color: white;
    }

    &.vip-link {
      background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
      color: white;
      font-weight: 600;
      animation: vip-glow 2s ease-in-out infinite;

      &:hover {
        background: linear-gradient(45deg, var(--primary-dark), var(--secondary-light));
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
      }
    }
  }
}

.search-box {
  flex: 1;
  max-width: 400px;
  
  .search-input {
    :deep(.el-input__wrapper) {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: none;
      
      .el-input__inner {
        color: white;
        
        &::placeholder {
          color: rgba(255, 255, 255, 0.7);
        }
      }
    }
  }
  
  .search-icon {
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    
    &:hover {
      color: white;
    }
  }
}

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  
  .toolbar-btn {
    color: rgba(255, 255, 255, 0.9) !important;
    
    &:hover {
      color: white !important;
      background: rgba(255, 255, 255, 0.1) !important;
    }
  }
}

.user-menu {
  .user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      background: rgba(255, 255, 255, 0.1);
    }
    
    .user-name {
      font-weight: 500;
    }
    
    .dropdown-icon {
      font-size: 12px;
    }
  }
}

.auth-buttons {
  display: flex;
  gap: var(--spacing-sm);
  
  a {
    text-decoration: none;
  }
}

// VIP发光动画
@keyframes vip-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(255, 107, 107, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.8), 0 0 30px rgba(255, 107, 107, 0.4);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .header-content {
    gap: var(--spacing-md);
  }
  
  .nav-menu {
    display: none;
  }
  
  .search-box {
    max-width: 200px;
  }
  
  .logo .logo-text {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .search-box {
    display: none;
  }
  
  .toolbar {
    gap: var(--spacing-sm);
  }
}
</style> 